<template>
  <div class="bind">
    <group label-width="6em"
           label-margin-right="2em"
           label-align="right"
           gutter='0'>
      <x-input title="姓名"
               v-model="userInfo.realName"
               placeholder="姓名"></x-input>
      <popup-picker title="性别"
                    :data="sexList"
                    v-model="sex"
                    value-text-align="left"
                    placeholder="请选择"></popup-picker>
      <!-- <x-input title="手机号"
               :max="11"
               type="tel"
               placeholder="请输入手机号码"
               keyboard="number"
               v-model="userInfo.userMobile"
               class="input">
        <span slot="right"
              class="vi"
              v-show="show"
              @click="getCode"> 获取验证码</span>
        <span slot="right"
              class="vi count"
              v-show="!show"> {{count}}s重新获取</span>
      </x-input> -->
      <cell title="手机号"
            value-align="left">{{userInfo.userMobile}}
        <!--  default value child inline-desc icon after-title title-->
        <span slot="child"
              class="vi"
              v-show="show"
              @click="getCode"> 获取验证码</span>
        <span slot="child"
              class="vi count"
              v-show="!show"> {{count}}s重新获取</span>
      </cell>

      <x-input title="验证码"
               placeholder="请输入验证码"
               keyboard="number"
               is-type="tel"
               v-model="verNumb"
               @on-change='active=true'></x-input>
      <x-input title="身份证号"
               v-model="idCard"
               placeholder="身份证号"
               :max='18'
               :min="15"></x-input>
      <x-input title="会员卡卡号"
               placeholder="会员卡卡号"
               v-model="cardNum"></x-input>
      <x-input title="卡密"
               placeholder="卡密"
               v-model="password"></x-input>
    </group>

    <div class="btn flex active"
         @click="submit">
      绑定
    </div>
    <div class="notice pd40 col_999">
      <p> 开卡流程：</p>
      <p> 1.购买旅住卡后，2月4日按照付款先后顺序发货，顺丰发货。</p>
      <p> 2.旅住卡仅限本人使用，以绑定的身份证信息为准，只有开卡者本人在现场登记入住才享受旅住卡权益。</p>
      <p> 3.3月15日开放民宿客房预订，不支持电话预定，只接受网络预订，预订平台仅限XXX微信公众号平台。开放线上订房系统后，根据要求填写相关信息，完成对应操作即可。</p>
      <p> 4.旅住卡预定网络平台上的所有房型（独栋别墅除外）只要房源空置都可以预定。</p>
      <p> 5.一张卡一天只能享受一个房间优惠政策，但可连续入住（需提前网络预订）。</p>
      <p> 6.每个房间入住人数，入住规定等必须严格遵守国家酒店管理条例。</p>
      <p> 7.旅住卡以持卡者第一次办理入住计算开始时间，后续三年享受开卡权益，若三年内未绑定身份信息入住则此卡作废。</p>
      <p> 8.旅住卡有实体卡和电子卡两种形式，入住只需出示一种即可，绑定身份信息后，若卡遗失可申请补办，若遗失旅住卡者未注册电子会员卡或绑定身份信息，不予补办，后果自负。</p>
    </div>

    <toast v-model="toastshow"
           type="text"
           width="200px"
           position="moddle">{{mesg}}~</toast>
  </div>
</template>
<script>
import { Group, Cell, XInput, PopupPicker, Toast, InlineDesc } from 'vux'
import { mapGetters } from 'vuex'
import * as API from '../../api'
export default {
  components: {
    Group, Cell, XInput, PopupPicker, Toast
  },

  data () {
    return {
      sexList: [['男', '女']],
      sex: [],
      addr: '',
      show: true,
      active: false,
      toastshow: false,
      idCard: '',
      password: '',
      cardNum: '',
      detail: '',
      mesg: '',
      count: '',
      verNumb: ''
    }
  },
  created () {
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    getCode () {
      const myreg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/
      if (this.userInfo.userMobile === '' || !myreg.test(this.userInfo.userMobile)) {
        this.toastshow = true
        this.mesg = '手机号码格式不正确'
      } else {
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.show = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.show = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
        this.$http.get(API.sendCode, {          params: {
            mobile: this.userInfo.userMobile
          }        }).then(res => {
          if (res.data.code === 1) {
            this.mesg = '服务器异常，请稍后再试'
          }
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
      }
    },
    submit () {
      this.toastshow = true
      if (this.userInfo.realName === '') {
        this.mesg = '请填写姓名'
      } else if (this.sex.length === 0) {
        this.mesg = '请选择性别'
      } else if (this.verNumb === '') {
        this.mesg = '请填写验证码'
      } else if (this.idCard === '') {
        this.mesg = '请填写身份证'
      } else if (this.cardNum === '') {
        this.mesg = '请填写会员卡卡号'
      } else if (this.password === '') {
        this.password = '请填写会员卡卡号'
      } else {
        this.toastshow = false
        let gender = this.sex.join('')
        let data = {
          openId: this.userInfo.openId,
          gender: gender,
          userMobile: this.userInfo.userMobile,
          validateCode: this.verNumb,
          realName: this.userInfo.realName,
          identityCard: this.idCard,
          cardNumber: this.cardNum,
          password: this.password
        }
        this.$http.post(API.bind, data
        ).then(res => {
          this.toastshow = true
          if (res.data.code === 1) {
            this.mesg = '操作失败，请联系后台管理员'
          } else if (res.data.code === 500) {
            this.mesg = res.data.msg
          } else if (res.data.code === 0) {
            this.toastshow = false
            this.$router.replace('/mycard')
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    test () {
      this.active = true
    }
  }

}
</script>
<style lang="scss" scoped>
@import "../../assets/style/index.scss";
</style>
